<template>
  <div class="navbar">
    <ul>
      <li>
        <router-link to="/home" active-class="active">
          <span>
            <i class="iconfont icon-elment"></i>
          </span>
          <div>外卖</div>
        </router-link>
      </li>
      <li>
        <router-link to="/search" active-class="active">
          <span>
            <i class="iconfont icon-compass-full"></i>
          </span>
          <div>搜索</div>
        </router-link>
      </li>
      <li>
        <router-link to="/cart" active-class="active">
          <span>
            <i class="iconfont icon-huiyishiyudingdingdan_huaban"></i>
          </span>
          <div>订单</div>
        </router-link>
      </li>
      <keep-alive>
        <li>
          <router-link to="/profit" active-class="active">
            <span>
              <i class="iconfont icon-my"></i>
            </span>
            <div>我的</div>
          </router-link>
        </li>
      </keep-alive>
    </ul>
  </div>
</template>

<script>
export default {};
</script>

<style>
.navbar {
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 5px 0;
  margin-top: 5px;
  background: white;
  z-index: 999;
}
.navbar ul {
  width: 100%;
  display: flex;
}
.navbar ul li {
  flex: 1;
}
.navbar i {
  font-size: 22px;
}
.navbar .active {
  color: red;
}
</style>